<template>
  <section class="gress-container">
    <el-row class="detail-info">
      <div class="info-title">{{ payName }}</div>
      <el-col :span="24" class="pay-detail">
        <div class="detail-item">应缴费班级：{{ statistics.shouldPayClassNum }}</div>
        <div class="detail-item">
          <span class="detail-item-left">应缴费人数：{{ statistics.shouldPaystudentNum }}人</span>
          <span>实缴费人数：{{ statistics.totalPayNum }}人</span>
        </div>
        <div class="detail-item">
          <span class="detail-item-left">已缴费金额：{{ statistics.totalPayAmount | currency }}元</span>
          <span>未缴费金额：{{ statistics.totalNOPayAmount | currency }}元</span>
        </div>
        <el-progress class="progress detail-item" :text-inside="true" :stroke-width="20" :percentage="percent(statistics)"></el-progress>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <div class="data-t">
        <span>已完成班级数：{{ statistics.totalPayclassNum }}个</span>
        <span>未完成班级数：{{ statistics.totalNoPayclassNum }}个</span>
      </div>
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出</el-button>
    </el-row>
    <el-row>
      <ctable :thead="thead" :table-data="lists" :page-data="pageObj" :options="options" all-align="center" :opt-width="80"></ctable>
    </el-row>
  </section>
</template>
<script>
import ctable from 'components/common/ctable'
import { getPayList, getCountInfo } from 'api/school/project/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      statistics: {}, // 统计信息
      thead: [{ // ctable组件头{
        name: '班级',
        prop: 'name'
      }, {
        name: '人数',
        prop: 'studentNum'
      }, {
        name: '应缴费总额',
        prop: 'shouldPay',
        format: this.priceFilter
      }, {
        name: '已缴费总额',
        prop: 'payed',
        format: this.priceFilter
      }, {
        name: '缴费完成进度',
        prop: 'plan'
      }],
      options: [{
        name: '详情',
        callback: this.toDetail
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      lists: [], // 数据集合
      paymentId: Number(common.params('paymentId')),
      payName: common.params('payName')
    }
  },
  created () {
    this.getData(1)
    getCountInfo({
      schoolPaymentSkuId: this.paymentId
    }).then(res => {
      this.statistics = res.data
    })
  },
  components: {
    ctable
  },
  methods: {
    percent (obj) { // 进度条处理
      let process = obj.totalPayAmount ? obj.totalPayAmount / (obj.totalPayAmount + obj.totalNOPayAmount) * 100 : 0
      return Number(process.toFixed(2))
    },
    exportData () { // 导出
      window.open(`/net/schooladmin/school-order/exports-payment-list-by-class?schoolPaymentSkuId=${this.paymentId}&login-key=${window.localStorage.loginKey}`)
    },
    getData (int) { // 获取数据
      getPayList({
        page: int,
        count: 15,
        schoolPaymentSkuId: this.paymentId
      }).then(res => {
        this.lists = res.data
      })
    },
    toDetail (obj) {
      this.$router.push({name: 'progressLists', query: {paymentId: this.paymentId, classId: obj.classId, payName: this.payName, className: obj.name}})
    },
    priceFilter (row, col, value) { // 价格处理
      return (value / 100).toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
.gress-container {
  padding: 20px;
  .detail-info {
    margin-bottom: 20px;
    .info-title {
      border-bottom: 1px solid #ccc;
      padding-bottom: 6px;
      padding-left: 10px;
      font-size: 18px;
      color: #666;
    }
    .today-detail {
      display: flex;
      align-items: center;
    }
    .info-list {
      padding: 30px 0;
    }
    .info-item {
      flex: 1;
      width: 0;
      color: #4f4f4f;
      text-align: center;
    }
    .info-item:last-child {
      padding-bottom: 0;
    }
    .left {
      color: #20a0ff;
      font-size: 30px;
      font-weight: bold;
    }
    .pay-detail {
      color: #666;
      margin-top: 20px;
      border: 1px solid #ccc;
      border-radius: 8px; 
      .detail-item {
        margin-top: 20px;
        padding-left: 10px;
      }
      .detail-item-left {
        margin-right: 18px;
      }
      .progress {
        width: 70%;
        margin-bottom: 20px;
      }
    }
  }
  .data-t {
    font-size: 14px;
    color: #20a0ff;
    span {
      margin-right: 10px;
    }
  }
}
</style>

